<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child" size="small">
          <TabPane tab="main_tabs_child" label="基础配置">

            <Form :label-width="120">
<!--              <FormItem label="显示间隔斑马纹">
                <i-switch size="small" v-model="tableConfig.stripe"></i-switch>
              </FormItem>-->
              <FormItem label="显示纵向边框">
                <i-switch size="small" v-model="tableConfig.border"></i-switch>
              </FormItem>
              <FormItem label="显示表头">
                <i-switch size="small" v-model="tableConfig.showHeader"></i-switch>
              </FormItem>
              <FormItem label="是否加载中">
                <i-switch size="small" v-model="tableConfig.loading"></i-switch>
              </FormItem>
<!--              <FormItem label="禁用鼠标悬停时高亮">
                <i-switch size="small" v-model="tableConfig.disabledHover"></i-switch>
              </FormItem>-->
              <FormItem label="支持行单选">
                <i-switch size="small" v-model="tableConfig.highlightRow"></i-switch>
              </FormItem>
              <FormItem label="表格尺寸">
                <Select size="small" clearable v-model="tableConfig.size">
                  <Option value="default">默认</Option>
                  <Option value="small">小型</Option>
                  <Option value="large">大型</Option>
                </Select>
              </FormItem>
              <FormItem label="数据为空时显示">
                <Input size="small" v-model="tableConfig.noDataText"/>
              </FormItem>
<!--              <FormItem label="筛选数据为空时显示">
                <Input size="small" v-model="tableConfig.noFilteredDataText"/>
              </FormItem>-->

              <FormItemPanel title="表格样式配置">
                <FormItem label="表头背景色">
                  <PnColorPicker size="small" v-model="tableStyle.headerBackgroundColor" alpha recommend/>
                </FormItem>
                <FormItem label="表头字体颜色">
                  <PnColorPicker size="small" v-model="tableStyle.headerColor" alpha recommend/>
                </FormItem>
                <FormItem label="主体背景色">
                  <PnColorPicker size="small" v-model="tableStyle.bodyBackgroundColor" alpha recommend/>
                </FormItem>
                <FormItem label="主体字体颜色">
                  <PnColorPicker size="small" v-model="tableStyle.bodyColor" alpha recommend/>
                </FormItem>
                <FormItem label="表格边框颜色">
                  <PnColorPicker size="small" v-model="tableStyle.tableBorderColor" alpha recommend/>
                </FormItem>
                <FormItem label="行高亮背景色">
                  <PnColorPicker size="small" v-model="tableStyle.rowHighlightBackgroundColor" alpha recommend/>
                </FormItem>
                <FormItem label="行高亮字体颜色">
                  <PnColorPicker size="small" v-model="tableStyle.rowHighlightColor" alpha recommend/>
                </FormItem>
              </FormItemPanel>
            </Form>

          </TabPane>
          <TabPane tab="main_tabs_child" label="列配置">

            <Tabs size="small">
              <TabPane label="普通列">
                <Button class="float-right" size="small" type="primary" @click="addColumn"><Icon type="md-add" /> 新增列</Button>
                <div class="clearfix"></div>
                <div class="m-b-10px"></div>

                <draggable tag="Collapse" :component-data="{attrs: {accordion: true}}" :list="tableColumns" handle=".ivu-collapse-header">
                  <Panel :name="$PnUtil.uuid()" v-for="(column, index) in tableColumns" :key="index">
                    {{column.title ? column.title : '列' + (index + 1)}}
                    <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteColumn(index)"><Icon type="md-trash" /></a>
                    <div slot="content">
                      <Form :label-width="100">
                        <FormItem label="列类型">
                          <Select size="small" clearable v-model="column.type">
                            <Option value="index">序号</Option>
                            <Option value="selection">多选框</Option>
                          </Select>
                        </FormItem>
                        <FormItem label="对应字段">
                          <Input size="small" v-model="column.key"/>
                        </FormItem>
                        <FormItem label="显示标题">
                          <Input size="small" v-model="column.title"/>
                        </FormItem>
                        <FormItem label="宽度">
                          <Tooltip content="设置为0时为自动宽度" :max-width="200" placement="left">
                            <InputNumber size="small" :max="100000" :min="0" v-model="column.width" :active-change="false"/>
                          </Tooltip>
                        </FormItem>
                        <FormItem label="对齐方式">
                          <Select size="small" clearable v-model="column.align">
                            <Option value="left">左对齐</Option>
                            <Option value="center">居中对齐</Option>
                            <Option value="right">右对齐</Option>
                          </Select>
                        </FormItem>
                        <FormItem label="列固定">
                          <Tooltip content="列是否固定在左侧或者右侧" :max-width="200" placement="left">
                            <Select size="small" clearable v-model="column.fixed">
                              <Option value="left">左侧</Option>
                              <Option value="right">右侧</Option>
                            </Select>
                          </Tooltip>
                        </FormItem>
                        <FormItem label="文本超限省咯号">
                          <i-switch size="small" v-model="column.ellipsis"></i-switch>
                        </FormItem>
                        <FormItem label="文本超限Tooltip">
                          <i-switch size="small" v-model="column.tooltip"></i-switch>
                        </FormItem>
                      </Form>
                    </div>
                  </Panel>
                </draggable>
              </TabPane>
              <TabPane label="排名列">
                <Form :label-width="80">
                  <FormItem label="显示">
                    <i-switch size="small" v-model="tableConfig.rankingColumn.show"></i-switch>
                  </FormItem>
                  <FormItem label="列标题">
                    <Input size="small" v-model="tableConfig.rankingColumn.title"/>
                  </FormItem>
                  <FormItem label="图标大小">
                    <InputNumber size="small" :max="100000" :min="0" v-model="tableConfig.rankingColumn.fontSize" :active-change="false"/>
                  </FormItem>
                  <FormItem label="列宽度">
                    <InputNumber size="small" :max="100000" :min="0" v-model="tableConfig.rankingColumn.width" :active-change="false"/>
                  </FormItem>
                  <FormItem label="第一名颜色">
                    <PnColorPicker size="small" v-model="tableConfig.rankingColumn.firstColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="第二名颜色">
                    <PnColorPicker size="small" v-model="tableConfig.rankingColumn.secondColor" alpha recommend/>
                  </FormItem>
                  <FormItem label="第三名颜色">
                    <PnColorPicker size="small" v-model="tableConfig.rankingColumn.thirdColor" alpha recommend/>
                  </FormItem>
                </Form>
              </TabPane>
            </Tabs>

          </TabPane>
        </Tabs>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="AdvancedTableComp"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="行单选时触发">
            <InteractionSender :interactionKey="'onCurrentChange'"></InteractionSender>
            <Alert show-icon style="padding-right: 10px;">
              currentRow：当前选中行的数据<br/>
              oldCurrentRow：上一次选中行的数据
            </Alert>
            <CodeEditor v-model="tableEventCode.onCurrentChangeCode"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import AdvancedTableComp from './AdvancedTableComp'
  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';
  import FormItemPanel from "@/components/common/FormItemPanel";

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'AdvancedTableCompForm',
    components: {FormItemPanel},
 // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      addColumn () {
        this.tableColumns.push(AdvancedTableComp.buildTableColumnConfig())
      },
      deleteColumn (index) {
        this.tableColumns.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        tableConfig: 'component.compConfigData.tableConfig',
        tableColumns: 'component.compConfigData.tableColumns',
        tableStyle: 'component.compConfigData.tableStyle',
        tableEventCode: 'component.compConfigData.tableEventCode',

      })
    }
  }
</script>

<style scoped>

</style>
